// Modal.vue
<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="displayModuleTitle"
    width="700px"
    centered
    :showOkBtn="false"
    cancel-text="关闭"
  >
    <div style="min-height: 400px">
      <div class="checkFormItem" v-for="(item, index) in checkFormData">
        <div style="margin-bottom: 5px">{{ item.label }}</div>
        <a-input disabled :value="item.content.value" addon-before="选择结果"></a-input>
        <a-input
          addon-before="补充说明"
          style="margin: 5px 0"
          disabled
          v-if="item.content.description"
          :value="item.content.description"
        />
        <a-image-preview-group>
          <div style="display: flex; flex-wrap: wrap">
            <div v-for="img in item.content.images" style="margin: 5px 2px">
              <a-image
                :key="img.id"
                width="100px"
                height="80px"
                :src="getImageFileUrlPrefix + img.id"
                :alt="img.name"
              />
            </div>
          </div>
        </a-image-preview-group>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { computed, defineComponent, ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { displayTitle } from '/@/utils/QcUnifyUtil';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getCheckFormFull, getCheckRecord } from '/@/api/ehs/checkForm';
  import { useGlobSetting } from '/@/hooks/setting';
  import { getImageFileApi } from '/@/api/platform/file';
  const { createMessage } = useMessage();
  export default defineComponent({
    components: { BasicModal },
    name: 'ViewCheckFormInfo',
    setup() {
      const { uploadUrl } = useGlobSetting();
      const getImageFileUrlPrefix = ref<string>(uploadUrl + getImageFileApi);
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      const recordId = ref();
      const checkFormData = ref();
      const [register, { closeModal }] = useModalInner((data) => {
        if (data != undefined && data != null) {
          let unrefData = unref(data);
          qcUnifyProps.value = unrefData;
          //接收父组件传递的数据
          if (unrefData?.recordId) {
            recordId.value = unrefData.recordId;
            getCheckRecord(recordId.value).then((res) => {
              // let content = JSON.parse(res.content);
              let content = res.content ? JSON.parse(res.content)?.content : {};
              let data = [];
              Object.keys(content).forEach((key) => {
                data.push({
                  label: key,
                  content: content[key],
                });
              });
              checkFormData.value = data;

              console.log('checkFormData', checkFormData.value);
            });
          }
        }
      });
      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });
      return {
        register,
        checkFormData,
        closeModal,
        displayModuleTitle,
        getImageFileUrlPrefix,
      };
    },
  });
</script>
<style scoped>
  .checkFormItem {
    font-size: 15px;
    margin: 5px;
  }
</style>
